<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
       <ul>
            <!-- 注意: v-for 遍历数组/对象/数值得到的item,index 仅能在当前标签以及子元素内使用 -->
            <!-- <li v-for="item in list">{{item}}</li> -->
            <li :class="'li-'+ index" v-for="(item,index) in list"><span>{{item}}</span>---{{index}}</li>
       </ul>

       <ul>
            <!-- <li v-for="val in obj">
                <span>{{val}}</span>
            </li> -->
           <!-- <li v-for="(val,key) in obj">
                <span>{{key}}</span>----<span>{{val}}</span>
           </li> -->
           <li v-for="(val,key,index) in obj">
                <span>{{index}}</span> ----<span>{{key}}</span>----<span>{{val}}</span>
           </li>
       </ul>

       <ul>
        <li v-for="(n,i) in 10">
             <span>{{n}}</span>---- <span>{{i}}</span> 
        </li>
    </ul>
    </div>
</body>
<script>
    // v-for  列表渲染, 把一个数组对应为一组元素
    // 语法:   
    
    // v-for 可以用于遍历数组/对象/数值
    
    // 遍历数组  
    // v-for="item in arr"
    // v-for="(item,index) in arr"
    
    // 遍历对象
    // v-for="val in obj"
    // v-for="(val,key) in obj"
    // v-for="(val,key,index) in obj"

    // 遍历数组:
    // v-for="n in 10"
    // v-for="(n,i) in 10"

    // 注意: v-for 遍历数组/对象/数值得到的item,index 仅能在当前标签以及子元素内使用 

    new Vue({
        el:"#app",
        data:{
            list:[1,4,7,2,5,8,3,6,9],
            obj:{name:"张三",age:18,height:"177cm",weight:"70kg"}
        },
    })


</script>
</html>